<template>
    <div class="iframe">
        <div class="i-title">
            echarts
        </div>
        <div class="i-tip">
            <div ref="echarsDom" class="i-echars"></div>
        </div>
    </div>
</template>

<script setup>
    import * as echarts from 'echarts';
    import {
        ref,
        onMounted
    } from 'vue'
    const echarsDom = ref(null);
    let options = {
        title: {
            text: "总用户量"
        },
        tooltip: {},
        xAxis: {
            data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [{
            name: "用户量",
            type: "bar",
            data: [5, 20, 25, 15, 18, 20],
        }, ]
    }
    onMounted(() => {
        const myEcharts = echarts.init(echarsDom.value);
        options && myEcharts.setOption(options);
    })
</script>
<style scoped>
.i-echars{
    width: 800px;
    height: 450px;
}
</style>